<template>
  <div class="address">
    <navBar title="联系人列表" />

    <!-- 联系人列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="content"
    >
      <van-cell v-for="item in addrList" :key="item.id" :label="item | addr">
        <template #icon>
          <van-checkbox
          :disabled="true"
          v-model="item.isDefault" />
        </template>
        <template #title>
          {{ item.realName }}  {{ item.phone }}
          <van-tag type="danger" v-if="item.isDefault">默认</van-tag>
        </template>
        <template>
          <van-icon name="edit" @click="$router.push({
            path: '/exitAddress',
            query: { id: item.id }
          })" />
        </template>
      </van-cell>
    </van-list>

    <!-- 空状态 -->
    <van-empty description="空空如也" v-if="!addrList.length" />

    <!-- 添加联系人 -->
    <div class="addBtn">
      <van-button type="danger" @click="$router.push('/exitAddress')" round block>新增联系人</van-button>
    </div>
  </div>
</template>

<script>
import {
  addressList,
} from '@/api/user/address'

export default {
  data() {
    return {
      addrList: [], // 联系人列表
      loading: false,
      finished: false,
      page: {
        limit: 20,
        page: 1,
      }
    }
  },
  created() {
    this.addressList()
  },
  methods: {
    // 获取联系人列表
    async addressList() {
      const { data } = await addressList(this.query)
      console.log(data);
      this.addrList = data || []
    },

    // 上拉加载
    onLoad() {
      this.page.page += 1
      this.addressList()
      this.loading = false
    }
  },
  filters: {
    // 联系人地址
    addr(item) {
      return item.province + item.city + item.district + item.detail || ''
    }
  }
}
</script>
<style lang="scss" scoped>
.address {
  text-align: left;
  .content {
    margin: 10px 5px;
    .van-cell {
      border-radius: 5px;
    }
    .van-checkbox {
      margin-right: 10px;
    }
    .van-icon {
      margin-top: 10px;
      font-size: 21px;
    }
  }
  .addBtn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: #fff;
  }
}
</style>